<template>
    <div>
        <el-row>
            <el-col>
                <el-input
                    placeholder="请输入内容"
                    v-model="keyword"
                    class="input_keyword"
                    style="width: 400px;"
                    id="tipinput"
                >
                </el-input>
                <el-button type="primary" @click="submitResult">拾取</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <div v-if="result" class="result">
                    <div class="address">{{result.cityname}} {{result.adname}} {{result.address}} {{result.name}}</div>
                    <div class="lng">
                        维度：{{result.location.lat}} 经度：{{result.location.lng}}
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <div id="container" class="map-container" :style="`height: 300px`"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
let map, marker;
export default {
    name: 'Location',
    data() {
        return {
            keyword: null,
            result: null
        }
    },
    mounted() {
        this.$nextTick(function () {
            this.initMap();
        });
    },
    methods: {
        initMap() { //初始化地图
            let _this = this
            map = new AMap.Map("container", {
                resizeEnable: true,
                zoom: 11, //初始地图级别
            });
            map.on("complete", function () {
                AMap.plugin('AMap.Autocomplete', function () {
                    // 实例化Autocomplete
                    var autoOptions = {
                        // input 为绑定输入提示功能的input的DOM ID
                        input: 'tipinput'
                    }
                    var autoComplete = new AMap.Autocomplete(autoOptions);
                    // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
                    AMap.event.addListener(autoComplete, "select", _this.handleSelect);//注册监听，当选中某条记录时会触发
                })
            });
        },

        handleSelect(e) { // 根据输入提示来选择位置搜索
            let _this = this
            AMap.plugin('AMap.PlaceSearch', function () {
                //构造地点查询类
                var placeSearch = new AMap.PlaceSearch({
                    pageSize: 1, // 单页显示结果条数
                    map: map, // 展现结果的地图实例
                    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                });
                placeSearch.setCity(e.poi.adcode);
                //关键字查询查询
                placeSearch.search(e.poi.name, function (status, result) {
                    // 查询成功时，result即对应匹配的POI信息
                    if (status === 'complete') {
                        if (result.info === 'OK') {
                            _this.result = result.poiList.pois[0]
                        }
                    }
                });
            })
        },

        submitResult() {
            if(this.result) {
                this.$emit('getLocationResult', this.result)
                this.result = null
                this.keyword = null
            } else {
                this.$message.error('请输入关键字');
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.input_keyword{
    margin-bottom: 10px;
    margin-right: 10px;
}
.result{
    border:1px solid #eee;
    padding: 10px;
    margin-bottom: 10px;
    .address{
        padding-bottom: 10px;
    }
}
</style>